import React, { useState } from "react";
import {
  Input,
  InputGroup,
  Stack,
  InputLeftAddon,
  InputRightAddon,
  FormHelperText,
  RadioGroup,
  Radio,
  Select,
  Switch,
  FormLabel,
  Flex,
  Button,
  FormControl
} from "@chakra-ui/core";
import { FaUserAlt, FaLock, FaCheck, FaEnvelope } from "react-icons/fa";
import { registerApi } from '../api/api';
export default function SignUp() {
  const axios = require('axios').default;
  const btnStyle = {
    fontSize: '18px',
    borderRadius: '25px',
    marginTop: '20px !important'
  }
  const [user, setUser] = useState({
    username: '',
    email: '',
    password: ''
  });
  const usernameChange = e => {
    setUser({
      ...user,
      username: e.target.value
    });
  }
  const emailChange = e => {
    setUser({
      ...user,
      email: e.target.value
    });
  }
  const pwdChange = e => {
    setUser({
      ...user,
      password: e.target.value
    });
  }
  const register = () => {
    axios.post(registerApi, {user: JSON.parse(JSON.stringify(user))}).then(res => {
      setUser({
        username: '',
        email: '',
        password: ''
      })
      alert("Register success!")
    }).catch(err => {
      console.log(err)
    })
  }
  return (
    <form>
      <Stack spacing="2">
        <FormControl >
          <InputGroup>
            <InputLeftAddon children={<FaUserAlt />} />
            <Input type="text" placeholder="请输入用户名" value={user.username} onChange={usernameChange}/>
          </InputGroup>
          <br />
          <InputGroup>
            <InputLeftAddon children={<FaEnvelope />} />
            <Input type="email" placeholder="请输入邮箱" value={user.email} onChange={emailChange}/>
          </InputGroup>
        </FormControl>
        <InputGroup>
          <InputLeftAddon children={<FaLock />} />
          <Input type="password" placeholder="请输入密码" value={user.password} onChange={pwdChange}/>
        </InputGroup>
        <Button {...btnStyle} _hover={{ bgColor: "#3194d0" }} w="100%" colorScheme="teal" onClick={register}>
          注册
        </Button>
      </Stack>
    </form>
  );
}
